<template>
	<a-collapse :bordered="false">
		<template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
		</template>
		<a-collapse-panel key="1" :header="i18n('pieSetting','饼图设置')">
			<a-row>
				<a-col :span="12">
					<a-form-item :label="i18n('radius','饼图半径')">
						<a-input v-model:value="config.styles.pieConfig.radius" :placeholder="i18n('radius','饼图半径')" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="i18n('center','饼图圆心坐标')">
						<a-input v-model:value="config.styles.pieConfig.center" :label="i18n('center','圆心坐标')" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
		<a-collapse-panel key="2" :header="chartI18n('common.labelSetting','标签设置')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.pieConfig.show" />
                </span>
            </template>
			<a-row>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
						<a-input placeholder="输入内容" type="number" v-model:value="config.styles.pieConfig.fontSize"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.fontSize','字体颜色')">
						<a-input v-model:value="config.styles.pieConfig.fontColor"  type="color"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.position','位置')">
						<a-select v-model:value="config.styles.pieConfig.position">
							<a-select-option value="outside">{{chartI18n('common.outside','外部')}}</a-select-option>
							<a-select-option value="inside">{{chartI18n('common.inside','内部')}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showPercentage','展示百分比')">
						<a-switch  size="small" v-model:checked="config.styles.pieConfig.showPercentage"/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showName','展示名称')">
						<a-switch  size="small" v-model:checked="config.styles.pieConfig.showName"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item :label="chartI18n('common.showValue','展示数值')">
						<a-switch  size="small" v-model:checked="config.styles.pieConfig.showValue"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-collapse-panel>
	</a-collapse>
</template>

<script>
export default {
	name: "pie-config",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	data() {
		return {
			pieConfig:{
				show:false,
				fontSize:12,
				fontColor:"#FFFFFF",
				position:"outside",
				showName:true,
				showValue:false,
				showPercentage:true,
				radius:"",
				center:"50%,50%"
			}
		}
	},
	created() {
		if(!this.pieConfig.radius && this.config.chartType=='ringChart'){
			this.pieConfig.radius="40%,73%"
		}else if(!this.pieConfig.radius && this.config.chartType=='pieChart'){
			this.pieConfig.radius="0%,73%"
		}
		if(!this.config.styles.pieConfig){
            this.config.styles["pieConfig"]=this.pieConfig;
		}
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"pieChartLang",key);
		},
		chartI18n(name,text,key){
			return this.$ti18(name,text,"chartLang",key);
		},
	},
	watch: {}
}
</script>

<style scoped>
</style>
